<!DOCTYPE html>
<html>
<head>
<title>oschat</title>
<meta charset="utf-8">
<link href="src/css/chat.css" rel="stylesheet" media="screen">
<link href="src/css/font-awesome.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="src/js/jquery-1.8.0.min.js"></script>

</head>
<body>
	<div class="chat-tools"></div>
	<div class="win">
		<div class="win-left">
			<div class="accs">
				<div class="acc active" target="online">
					<div class="acc-head online">
						<span class="add-on online">
							<i class="icon-user icon-large"></i>
						</span>Online
					</div>
				</div>
				<div class="acc-content" id="online">
					<div class="acc-content-main">
						<div class="user">
							<div class="u-photo">
								<img width="25" height="25" src="http://static.oschina.net/uploads/user/127/254662_100.jpg?t=1379914852000">
							</div>
							<div class="u-name">Eleven</div>
						</div>
					</div>
				</div>
				<div class="acc" target="firends">
					<div class="acc-head firends"><span class="add-on online">
							<i class="icon-user-md icon-large"></i>
						</span>Firends</div>
				</div>
				<div class="acc-content" id="firends" style="display:none;">
					<div class="acc-content-main">
						<div class="user">
							<div class="u-photo">
								<img width="25" height="25" src="http://static.oschina.net/uploads/user/127/254662_100.jpg?t=1379914852000">
							</div>
							<div class="u-name">Eleven</div>
						</div>
					</div>
				</div>
				<div class="acc" target="groups">
					<div class="acc-head groups"><span class="add-on online">
							<i class="icon-group icon-large"></i>
						</span>Groups</div>
				</div>
				<div class="acc-content" id="groups" style="display:none;">
					<div class="acc-content-main">
						<div class="user">
							<div class="u-photo">
								<img width="25" height="25" src="http://static.oschina.net/uploads/user/127/254662_100.jpg?t=1379914852000">
							</div>
							<div class="u-name">Eleven</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="win-right">
			<div class="right-main">
				<div class="chats">
					<div class="chats-tabs">
						<div class="tab-pre"></div>
						<ul>
							<li><a target="user-1">User1</a></li>
							<li class="active" target="user-2"><a>User2</a></li>
							<li><a target="group-3">Group3</a></li>
						</ul>
						<div class="tab-next"></div>
					</div>
				</div>
				<div class="chat-main">
					<iframe src="chatuser.html" id="user-1" style="display:none;"></iframe>
					<iframe src="chatuser.html" id="user-2"></iframe>
					<iframe src="chatuser.html" id="group-3" style="display:none;"></iframe>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="src/js/chat.js"></script>

	<script type="text/javascript">

		/**
			界面相关初始化以及事件
		**/
		$(function(){
			$('.acc').each(function() {
				$(this).click(function(){
					$('.acc-content').hide();
					var id = $(this).attr('target');
					$('#'+id).show();					
				});
			});

			$('.chats-tabs ul li').each(function(){
				$(this).click(function(){
					$('.chats-tabs ul li').removeClass('active');
					$(this).addClass('active');
					var tar = $(this).attr('target');
					$('.chat-main iframe').hide();
					$('#'+tar).show();
				});
			});
		});
	</script>
</body>
</html>